
<template>
  <div style="height:100%;width:100%">
    <div class="body" :style="view">
      <div class="scroll-content" :style="{top}" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
        <!-- <tr v-for="item in dutyRateData">
          <td>{{item.group}}</td>
          <td>{{item.bookNum}}</td>
          <td>{{item.sceneNum}}</td>
          <td>{{item.dutyRate}}</td>
        </tr> -->

        <el-table
    :data="tableData"
    style="width: 100%">
    
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>


      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  props: {
    viewHeight: {//可视窗口
      type: [Number, String],
      default: "250px"
    },
    // animationTime: {//移动间隔
    //   type: [Number, String],
    //   default: "0.825s"
    // },
    // direction:{//移动方向
    //     type:String,
    //     default:top,
    // },
    moveDistance:{//移动距离
        type:Number,
        default:50
    }

  },
  data() {
    return {
      dutyRateData: [
        { group: "电工班1", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
        { group: "电工班2", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
        { group: "电工班3", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
        { group: "电工班4", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
        { group: "电工班5", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
        { group: "电工班6", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
        { group: "电工班7", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
        { group: "电工班8", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
        { group: "电工班9", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
        { group: "电工班10", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
        { group: "电工班11", bookNum: 3, sceneNum: 0, dutyRate: "88%" }
      ],
      activeIndex: 0,
      view:'',

      tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          tag: '家'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333,
          tag: '公司'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333,
          tag: '家'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333,
          tag: '公司'
        }],
        timer: "",

    };
  },
  methods: {
      mouseEnter(){
          window.clearInterval(this.timer);
      },
      mouseLeave(){
          this.timer =setInterval(_ => {
      //自定义滚动 出勤率
      if (
        this.activeIndex <
        this.tableData.length /* this.towerListArr.length */
      ) {
        this.activeIndex += 1;
      } else {
        this.activeIndex = 0;
      }
    }, 1500);
      }
  },
  computed: {
    top() {
      return -this.activeIndex * this.moveDistance + "px"; //定义移动的单元高度
    },
    
  },
  mounted() {
    this.view= {"height":this.viewHeight}
    this.timer =setInterval(_ => {
      //自定义滚动 出勤率
      if (
        this.activeIndex <
        this.tableData.length /* this.towerListArr.length */
      ) {
        this.activeIndex += 1;
      } else {
        this.activeIndex = 0;
      }
    }, 1500);
//  window.clearInterval(this.timer);
  }
};
</script>
<style lang="scss" scoped>
.scroll-content {
  //自定义滚动 间隔时间和方向
  position: relative;
  transition: top 0.825s; //向上移动
}
.body {
  width: 100%;
  height: 100px;
  overflow-y: hidden;
  //   position: absolute;
}
</style>
